<template>
	<view class="container">
		<view class="carousel">
			<swiper indicator-dots circular="true" duration="400">
				<swiper-item class="swiper-item" v-for="(item, index) in goodDetail.images" :key="index">
					<view class="image-wrapper"><image :src="item" class="loaded" mode="aspectFill"></image></view>
				</swiper-item>
			</swiper>
		</view>

		<view class="introduce-section">
			<text class="title">{{goodDetail.name}}</text>
			<view class="price-box">
				<text class="price-tip">¥：</text>
				<text class="price">{{goodDetail.price}}</text>
				<!-- <text class="m-price">{{goodDetail.marketprice}}</text> -->
			</view>
			<!-- <view class="bot-row">
				<text>销量: {{goodDetail.salenum}}</text>
				<text>库存: {{goodDetail.stocknum}}</text>
				<text>浏览量: {{goodDetail.readnum}}</text>
			</view> -->
		</view>

		<!--  分享 -->
		<!-- <view class="share-section" @click="share">
			<view class="share-icon">
				<text class="yticon icon-xingxing"></text>
				享
			</view>
			<text class="tit">分享用户购买可获得佣金</text>
			<text class="yticon icon-bangzhu1"></text>
		</view> -->

		<view class="c-list">
			<view class="c-row b-b" v-if="specids" @click="toggleSpec">
				<text class="tit">商品规格</text>
				<view class="con">
					<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
						{{sItem.name}}
					</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>
			<view class="c-row b-b">
				<text class="tit">商品描述</text>
				<view class="con-list">
					<text>{{goodDetail.description || '暂无商品描述'}}</text>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">平台服务</text>
				<view class="bz-list con">
					<text>无忧售后服务 ·</text>
					<text>假一赔十 ·</text>
				</view>
			</view>
		</view>
		

		<view class="detail-desc">
			<view class="d-header"><text>图文详情</text></view>
			<rich-text :nodes="goodDetail.content"></rich-text>
		</view>
		
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<view class="p-b">
				<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
					<text class="yticon icon-xiatubiao--copy"></text>
					<text>首页</text>
				</navigator>
				<view class="p-b-btn" :class="{ active: favorite }" @click="toFavorite">
					<text class="yticon icon-shoucang"></text>
					<text>收藏</text>
				</view>
			</view>

			<view class="action-btn-group"><button type="primary" class=" action-btn no-border buy-now-btn" @click="buy(goodDetail.id)">立即购买</button></view>
		</view>
		
		<!-- 规格-模态层弹窗 -->
		<view 
			class="popup spec" 
			:class="specClass"
			@touchmove.stop.prevent="stopPrevent"
			@click="toggleSpec"
		>
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image :src="goodDetail.thumb"></image>
					<view class="right">
						<text class="price">¥{{goodDetail.price}}</text>
						<text class="stock">{{goodDetail.description}}</text>
						<view class="selected">
							已选：
							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
								{{sItem.name}}
							</text>
						</view>
					</view>
				</view>
				<view v-for="(item,index) in specList" :key="index" class="attr-list">
					<text>{{item.name}}</text>
					<view class="item-list">
						<text 
							v-for="(childItem, childIndex) in specChildList" 
							v-if="childItem.pid === item.id"
							:key="childIndex" class="tit"
							:class="{selected: childItem.selected}"
							@click="selectSpec(childIndex, childItem.pid)"
						>
							{{childItem.name}}
						</text>
					</view>
				</view>
				<button class="btn" @click="toggleSpec">完成</button>
			</view>
		</view>
		<!-- 分享 -->
		<share ref="share" :contentHeight="580" :shareList="shareList"></share>
	</view>
</template>

<script>
import share from '@/components/share';
export default {
	components: {
		share
	},
	data() {
		return {
			favorite: true, //是否收藏
			id: 0,
			shareList: [],
			goodDetail: {},
			
			specClass: 'none',
			specSelected:[],
			specids:'',
			
			specList: [],
			specChildList: [],
			
			// specList: [
			// 	{
			// 		id: 1,
			// 		name: '尺寸',
			// 	},
			// 	{	
			// 		id: 2,
			// 		name: '颜色',
			// 	},
			// ],
			// specChildList: [
			// 	{
			// 		id: 1,
			// 		pid: 1,
			// 		name: 'XS',
			// 	},
			// 	{
			// 		id: 2,
			// 		pid: 1,
			// 		name: 'S',
			// 	},
			// 	{
			// 		id: 3,
			// 		pid: 1,
			// 		name: 'M',
			// 	},
			// 	{
			// 		id: 4,
			// 		pid: 1,
			// 		name: 'L',
			// 	},
			// 	{
			// 		id: 5,
			// 		pid: 1,
			// 		name: 'XL',
			// 	},
			// 	{
			// 		id: 6,
			// 		pid: 1,
			// 		name: 'XXL',
			// 	},
			// 	{
			// 		id: 7,
			// 		pid: 2,
			// 		name: '白色',
			// 	},
			// 	{
			// 		id: 8,
			// 		pid: 2,
			// 		name: '珊瑚粉',
			// 	},
			// 	{
			// 		id: 9,
			// 		pid: 2,
			// 		name: '草木绿',
			// 	},
			// ]
		};
	},
	async onLoad(options) {
		//接收传值,id
		let id = options.id;
		if(id && id != undefined){
			this.id = id;
			this.loadData();
		}

		this.shareList = await this.$api.shareList;
	},
	methods: {
		//规格弹窗开关
		toggleSpec() {
			if(this.specClass === 'show'){
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 250);
			}else if(this.specClass === 'none'){
				this.specClass = 'show';
			}
		},
		//选择规格
		selectSpec(index, pid){
			let list = this.specChildList;
			list.forEach(item=>{
				if(item.pid === pid){
					this.$set(item, 'selected', false);
				}
			})
		
			this.$set(list[index], 'selected', true);
			//存储已选择
			/**
			 * 修复选择规格存储错误
			 * 将这几行代码替换即可
			 * 选择的规格存放在specSelected中
			 */
			this.specSelected = [];
			this.specids = '';
			list.forEach(item=>{
				if(item.selected === true){
					this.specSelected.push(item);
					if(!this.specids){
						this.specids = this.specids + item.id;
					}else{
						this.specids = this.specids + ',' + item.id;
					}
				}
			});
			console.log(this.specids);
		},
		//分享
		share() {
			this.$refs.share.toggleMask();
		},
		//收藏
		toFavorite() {
			this.favorite = !this.favorite;
		},
		async loadData() {
			const param = {};
			param.id = this.id;
			await this.$http.request('Goods','goodsdetail','GET', param, (res) => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						this.goodDetail = res.data.data;
						this.goodDetail.content = this.$api.formatRichText(this.goodDetail.content);
						
						this.specList = res.data.data.specList;
						this.specChildList = res.data.data.specChildList;
						
						//规格 默认选中第一条
						this.specList.forEach(item=>{
							for(let cItem of this.specChildList){
								if(cItem.pid === item.id){
									this.$set(cItem, 'selected', true);
									this.specSelected.push(cItem);
									if(!this.specids){
										this.specids = this.specids + cItem.id;
									}else{
										this.specids = this.specids + ',' + cItem.id;
									}
									break; //forEach不能使用break
								}
							}
						});
						console.log(this.specids);
						
					}
				}
			});
		},
		buy(options) {
			if(options && options != undefined){
				uni.navigateTo({
					url: '/pages/order/createOrderMenu1?goodsid='+this.id+'&specids='+this.specids
				});
			}
		},
		stopPrevent(){}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-bottom: 160upx;
}
.icon-you {
	font-size: $font-base + 2upx;
	color: #888;
}
.carousel {
	height: 722upx;
	position: relative;
	swiper {
		height: 100%;
	}
	.image-wrapper {
		width: 100%;
		height: 100%;
	}
	.swiper-item {
		display: flex;
		justify-content: center;
		align-content: center;
		height: 750upx;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
		}
	}
}

/* 标题简介 */
.introduce-section {
	background: #fff;
	padding: 20upx 30upx;

	.title {
		font-size: 32upx;
		color: $font-color-dark;
		height: 50upx;
		line-height: 50upx;
	}
	.price-box {
		display: flex;
		align-items: baseline;
		height: 64upx;
		padding: 10upx 0;
		font-size: 26upx;
		color: $uni-color-primary;
	}
	.price {
		font-size: $font-lg + 2upx;
	}
	.m-price {
		margin: 0 12upx;
		color: $font-color-light;
		text-decoration: line-through;
	}
	.coupon-tip {
		align-items: center;
		padding: 4upx 10upx;
		background: $uni-color-primary;
		font-size: $font-sm;
		color: #fff;
		border-radius: 6upx;
		line-height: 1;
		transform: translateY(-4upx);
	}
	.bot-row {
		display: flex;
		align-items: center;
		height: 50upx;
		font-size: $font-sm;
		color: $font-color-light;
		text {
			flex: 1;
		}
	}
}
/* 分享 */
.share-section {
	display: flex;
	align-items: center;
	color: $font-color-base;
	background: linear-gradient(left, #fdf5f6, #fbebf6);
	padding: 12upx 30upx;
	.share-icon {
		display: flex;
		align-items: center;
		width: 70upx;
		height: 30upx;
		line-height: 1;
		border: 1px solid $uni-color-primary;
		border-radius: 4upx;
		position: relative;
		overflow: hidden;
		font-size: 22upx;
		color: $uni-color-primary;
		&:after {
			content: '';
			width: 50upx;
			height: 50upx;
			border-radius: 50%;
			left: -20upx;
			top: -12upx;
			position: absolute;
			background: $uni-color-primary;
		}
	}
	.icon-xingxing {
		position: relative;
		z-index: 1;
		font-size: 24upx;
		margin-left: 2upx;
		margin-right: 10upx;
		color: #fff;
		line-height: 1;
	}
	.tit {
		font-size: $font-base;
		margin-left: 10upx;
	}
	.icon-bangzhu1 {
		padding: 10upx;
		font-size: 30upx;
		line-height: 1;
	}
	.share-btn {
		flex: 1;
		text-align: right;
		font-size: $font-sm;
		color: $uni-color-primary;
	}
	.icon-you {
		font-size: $font-sm;
		margin-left: 4upx;
		color: $uni-color-primary;
	}
}

.c-list {
	font-size: $font-sm + 2upx;
	color: $font-color-base;
	background: #fff;
	.c-row {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		position: relative;
	}
	.tit {
		width: 140upx;
	}
	.con {
		flex: 1;
		color: $font-color-dark;
		.selected-text {
			margin-right: 10upx;
		}
	}
	.bz-list {
		height: 40upx;
		font-size: $font-sm + 2upx;
		color: $font-color-dark;
		text {
			display: inline-block;
			margin-right: 30upx;
		}
	}
	.con-list {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: $font-color-dark;
		line-height: 40upx;
	}
	.red {
		color: $uni-color-primary;
	}
}

/*  详情 */
.detail-desc {
	background: #fff;
	margin-top: 16upx;
	.d-header {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80upx;
		font-size: $font-base + 2upx;
		color: $font-color-dark;
		position: relative;

		text {
			padding: 0 20upx;
			background: #fff;
			position: relative;
			z-index: 1;
		}
		&:after {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%);
			width: 300upx;
			height: 0;
			content: '';
			border-bottom: 1px solid #ccc;
		}
	}
	
}

/* 规格选择弹窗 */
	.attr-content{
		padding: 10upx 30upx;
		.a-t{
			display: flex;
			image{
				width: 170upx;
				height: 170upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 8upx;;
			}
			.right{
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
				line-height: 42upx;
				.price{
					font-size: $font-lg;
					color: $uni-color-primary;
					margin-bottom: 10upx;
				}
				.selected-text{
					margin-right: 10upx;
				}
			}
		}
		.attr-list{
			display: flex;
			flex-direction: column;
			font-size: $font-base + 2upx;
			color: $font-color-base;
			padding-top: 30upx;
			padding-left: 10upx;
		}
		.item-list{
			padding: 20upx 0 0;
			display: flex;
			flex-wrap: wrap;
			text{
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				font-size: $font-base;
				color: $font-color-dark;
			}
			.selected{
				background: #fbebee;
				color: $uni-color-primary;
			}
		}
	}
	
	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}
		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;
			.btn{
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $uni-color-primary;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30upx auto 20upx;
			}
		}
		@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}
			100% {
				transform: translateY(0%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(120%);
			}
		}
	}

/* 底部操作菜单 */
.page-bottom {
	position: fixed;
	left: 30upx;
	bottom: 30upx;
	z-index: 95;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 690upx;
	padding: 0 20upx;
	height: 100upx;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);
	border-radius: 16upx;
	
	.p-b{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.p-b-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: $font-sm;
		color: $font-color-base;
		width: 96upx;
		height: 80upx;
		.yticon {
			font-size: 40upx;
			line-height: 48upx;
			color: $font-color-light;
		}
		&.active,
		&.active .yticon {
			color: $uni-color-primary;
		}
		.icon-fenxiang2 {
			font-size: 42upx;
			transform: translateY(-2upx);
		}
		.icon-shoucang {
			font-size: 46upx;
		}
	}
	.action-btn-group {
		display: flex;
		height: 76upx;
		border-radius: 100px;
		overflow: hidden;
		box-shadow: 0 20upx 40upx -16upx #fa436a;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
		background: linear-gradient(to right, #ffac30, #fa436a, #f56c6c);
		margin-left: 20upx;
		position: relative;
		.action-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 180upx;
			height: 100%;
			font-size: $font-base;
			padding: 0;
			border-radius: 0;
			background: transparent;
		}
	}
}
</style>